<template>
  <div class="nav_outer">
    <Header>{{title}}</Header>
    <div class="search_bar">
      <div class="bar_location flex_center">
        <img src="../assets/img/map@2x.png" alt />
        <span>{{locate || '苏州'}}</span>
      </div>
      <div class="bar_input flex_auto">
        <img src="../assets/img/fangdajing@2x.png" alt />
        <input type="text" placeholder="闻泰通讯" v-model="searchtext" />
      </div>
      <div class="bar_btn" @click="tosearch">搜索</div>
    </div>
    <div class="jobs">
      <div class="job" v-for="item in joblists" v-bind:key="item.id" :data-id="item.id">
        <p class="job_title">{{item.title}}</p>
        <p class="job_tag">
          <span v-for="jtag in (item.positionTags ? item.positionTags.split(',') : [])" v-bind:key="jtag">{{jtag}}</span>
        </p>
        <div class="flex_bet">
          <span class="job_price">{{item.salaryTips}}元/月</span>
          <span class="common_statu" v-if="item.marketingType==0">入职奖</span>
        </div>
        <div class="jobtags flex_bet">
          <div class="jobtags_tags">
            <span v-for="tag in (item.welfareTags ? item.welfareTags.split(',') : [])" v-bind:key="tag">{{tag}}</span>
          </div>
          <span>{{item.cityName}}·{{ (item.updateDate || item.createDate) | today}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      totalPage: 1,
      joblists: [],
      loading: false,
      searchtext: "",
      searchedText: '',
      pullre: null,
      type: '',
      title: '热门招聘',
      locate: ''
    };
  },
  mounted() {
    let mui = this.mui,
      that = this;
    this.interactive.reachBottomLoad({
     callback: function(){
       if(that.loading){
          return;
      }
      that.pageNum+=1;
      that.loadJobs();
    }})
    mui(".jobs").on("tap", ".job", function() {
        var id = this.getAttribute("data-id");
        that.$router.replace({ path: "/gangwei/" + id });
      });
  },
  created() {
    let type = this.type = this.$route.query.type;
    //this.locate = localStorage.getItem('locate');
    this.locate = this.$store.state.locate;
    this.title = ['','热门招聘','企业急招','高额奖励','每日上新','寒暑假工'][type];
    this.loadJobs();
  },
  methods: {
    navito(url) {
      this.$router.push({ path: url });
    },
    tosearch() {
      this.pageNum = 1;
      this.searchedText = this.searchtext;
      this.loadJobs();
    },
    loadJobs() {
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http2.get("/mobile/enrollment/page", {
        current: that.pageNum,
        size: that.pageSize,
        searchContent: that.searchedText || "",
        type: this.type,
        cityName: this.$store.state.locate || '苏州',
        status: 1
      }).then(
        res => {
          if (that.pageNum == 1) {
            that.joblists = res.object;
          } else {
            that.joblists = that.joblists.concat(res.object);
          }
          that.totalPage = res.totalPage;
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='scss' scoped>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
.outer > div {
  background: #fff;
}
.search_bar {
  background: #fff;
  display: flex;
  padding: px2em(60) 0;
  .bar_location {
    padding: 0 px2em(28);
    > img {
      width: px2em(28);
      margin-right: px2em(28);
    }
  }
  .bar_input {
    flex: 1;
    background: #efefef;
    height: px2em(55);
    border-radius: 5px;
    img {
      width: px2em(35);
      height: px2em(35);
      vertical-align: middle;
      margin: 0 px2em(18);
    }
    > input {
      flex: 1;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
    }
  }

  .bar_btn {
    width: px2em(120);
    text-align: center;
    line-height: px2em(55);
  }
}
.jobs {
  .job {
    padding: px2em(30);
    margin: px2em(12) 0;
    padding-bottom: px2em(20);
    background: #fff;
    > p {
      margin-bottom: 5px;
    }
  }
  .jobs_title {
    padding-left: 0.5em;
    border-left: 6px solid #507df4;
  }
  .jobs_recomend {
    padding: px2em(20);
    position: relative;
    > hr {
      margin: 0;
    }
    > span {
      position: absolute;
      display: inline-block;
      width: px2em(196);
      line-height: px2em(40);
      text-align: center;
      background: #fff;
      left: 50%;
      margin-left: -px2em(98);
      top: 0;
    }
  }
  .job_title {
    font-size: 1.2em;
    color: #333;
  }
  .job_price {
    font-size: 1.2em;
    color: red;
  }
  .jobtags {
    margin-top: px2em(30);
    font-size: 0.7em;
    > span {
      color: #aeafaf;
    }
  }
  .jobtags_tags > span {
    height: px2em(40);
    border-radius: px2em(23);
    line-height: px2em(40);
    color: #00b9ff;
    border: 1px solid #00b9ff;
    padding: 3px 5px;
    margin-right: 6px;
  }
}
</style>